<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import Card from '@/views/new-screen/components/card.vue'
import { ArrowDown, Search } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import ProjectInfoCard from '../components/ProjectInfoCard.vue'
import { getBuildingTypes, getDistrictOptions, getScreedProject } from '../api'


const props = defineProps({
  isExpanded: Boolean,
  activeName: String,
})

const listWrap = ref(null)
const tableHeight = computed(() => {
  return 720 + (isAdvanceFormSearch.value ? 0 : 100)
}) // ref(720)
const distance = 100
const itemHeight = 210 // 200 + 10（margin-bottom）
const pagination = ref({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
})
const params = ref({
  projectName: '',
  projectCity: '',
  projectReview: '',
  projectType: '',
})
const isAdvanceFormSearch = ref(false)
const districtOptions = ref([]) // 城区
const qaStationOptions = ref([]) // 质监站
const buildingTypeOptions = ref([]) // 建筑类型
const investmentOptions = ref([]) // 投资额度
const tableData = ref([])


const noMore = computed(() => {
  return pagination.total <= tableData.value.length
})
const isLoading = ref(false)
const onScroll = ({ scrollTop }) => {
  const contentHeight = tableData.value.length * itemHeight
  const scrollDistance = contentHeight - tableHeight.value
  if (scrollTop >= scrollDistance - distance) {
    loadMore()
  }
}

const reqTableData = (isMore = false) => {
  isLoading.value = true
  getScreedProject({ pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, ...params.value })
    .then((res) => {
      tableData.value = isMore ? [...tableData.value, ...res.data.list] : res.data.list
      pagination.total = res.data.count
    })
    .finally(() => {
      isLoading.value = false
    })
}
const loadMore = () => {
  if (noMore.value || isLoading.value) return
  pagination.pageIndex += 1
  reqTableData(true)
}

const handleSearch = () => {
  console.log('handleSearch', params)
  pagination.pageIndex = 1
  pagination.pageSize = 10
  reqTableData()
}

const reqData = () => {
  pagination.pageIndex = 1
  pagination.pageSize = 10
  isLoading.value = true
  Promise.all([getBuildingTypes(), getDistrictOptions(), getScreedProject({ pageIndex: 1, pageSize: pagination.pageSize })])
    .then((res) => {
      console.log('res', res)
      if (res[0].success) {
        buildingTypeOptions.value = res[0].data
      }
      if (res[1].success) {
        districtOptions.value = res[1].data
      }
      if (res[2].success) {
        tableData.value = res[2].data.list
        pagination.total = res[2].data.count

      }
    })
    .finally(() => {
      isLoading.value = false
    })
}

onMounted(() => {
  reqData()
})

onUnmounted(() => {})
</script>

<template>
  <div :class="['right', isExpanded ? 'active' : '']">
    <card name="样板项目" class="company-card">
      <div class="table-wrap">
        <div class="tabel-form">
          <div class="default-form">
            <div class="search">
              <el-input v-model="params.projectName" type="text" placeholder="请输入" style="width: 260px;" clearable>
              </el-input>
              <el-button :icon="Search" @click="handleSearch"></el-button>
            </div>

            <div class="btn-advance" :class="{ 'active': isAdvanceFormSearch }" @click="isAdvanceFormSearch = !isAdvanceFormSearch">
              高级
              <span class="arrow"> ▶ </span>
            </div>
          </div>
          <div class="advance-wrap" v-show="isAdvanceFormSearch">
            <el-select v-model="params.projectCity" placeholder="城区" clearble style="width: 200px;">
              <el-option
                v-for="item in districtOptions"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-input v-model="params.projectReview" placeholder="质监站" style="width: 200px;height: 32px;" clearable>
              </el-input>
            <el-select v-model="params.projectType" placeholder="建筑类型" clearble style="width: 200px;">
              <el-option
                v-for="item in buildingTypeOptions"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-input v-model="params.projectInvestPrice" type="number" placeholder="投资额" style="width: 200px;height: 32px;" clearable>
              </el-input>
          </div>
        </div>
        <el-scrollbar :style="{ height: tableHeight + 'px'}" @scroll="onScroll">
          <div class="list-wrap" ref="listWrap">
            <ProjectInfoCard :data="item" v-for="(item, index) in tableData" :key="index" />
            <div class="no-data" v-if="!tableData.length && !isLoading">暂无数据</div>
            <div class="no-data loading" v-if="isLoading">加载中...</div>
            <div class="no-data no-more" v-if="noMore && tableData.length && !isLoading">没有更多</div>
          </div>
        </el-scrollbar>
      </div>
    </card>
  </div>
</template>

<style scoped lang="scss">
.right {
  .title-icon {
    display: inline-flex;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 61px;
    position: relative;
    bottom: 20px;
    // margin-top: 10px;
  }

  .overview-card {
    // height: 300px;
    // margin-bottom: var(--card-margin-bottom);
  }

  .table-wrap {
    color: #ffffff;

    .tabel-form {
      :deep(.el-input) {
        --el-input-text-color: #eee;
        --el-input-bg-color: #012650;
        --el-input-border-color: #012650;
      }
      :deep(.el-select  .el-select__wrapper) {
        border: 1px solid #012650; /* 设置边框颜色 */
        background-color: #012650 !important; /* 设置背景色 */
        // color: #fff !important; /* 设置字体颜色 */
        box-shadow: 0 0 0 1px #012650 inset;
      }
      .default-form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .search {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .btn-advance {
          color: #04AAF9;
          cursor: pointer;
          .arrow {
            display: inline-block;
            width: 1em;
            transition: all .3s ease;
          }
        }
        .btn-advance.active {
          .arrow {
            transform: rotate(90deg);
          }
        }
        :deep(.el-button) {
          color: white;
          background: #04AAF9;
          border-color: #04AAF9;
        }

      }

      .advance-wrap {
        height: 100px;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        margin-top: 10px;
      }
    }
    .no-data {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 3;
      color: #B9D9F4;
    }
  }
}
</style>
